<template>
	<view>
	<view class="content">
				<uni-search-bar placeholder="请输入关键词搜索" class="uni-searchbar" :radius="100" cancelButton="none"
					@confirm="search" @clear="Search" />
			</view>
		<view class="user-q">
			<text>{{users.length}}个用户</text>
		</view>

		<view class="head-container">
			<view class="click-title">
				<text :class="panelStatus[0].visible?'qq':'dd'" @click="clickGood(0)">所有</text>
			</view>
			<view class="click-title">
				<text :class="panelStatus[1].visible?'qq':'dd'" @click="clickGood(1)">申请教师</text>
			</view>
			<view class="click-title">
				<text :class="panelStatus[2].visible?'qq':'dd'" @click="clickGood(2)">教师</text>
			</view>
			<view class="click-title">
				<text :class="panelStatus[3].visible?'qq':'dd'" @click="clickGood(3)">学生</text>
			</view>
			<view class="click-title">
				<text :class="panelStatus[4].visible?'qq':'dd'" @click="clickGood(4)">禁止登录</text>
			</view>
		</view>
          		
		<view v-if="panelStatus[0].visible" class="User">
			<view v-for="(user,index) in users" :key="index" class="head-dd">
				
				<text class="iconfont icon-arrowdownfilling ic-xia" @click.stop="clickchoose(user)"></text>	
				<image :src="'http://localhost:8082/'+ user.avatar" mode="widthFix" class="img"
					@click="ShowUser(user)"></image>
				<text class="container">{{user.nickName +"["+userTypes[user.type+1]+"]"}}</text>
			</view>
		</view>
		<view v-if="panelStatus[1].visible" class="User">
			<view v-for="(user,index) in users" :key="index" class="head-dd" v-if="user.apply=true">
				
				<text class="iconfont icon-arrowdownfilling ic-xia" @click.stop="clickchoose(user)"></text>
				<image :src="'http://localhost:8082/'+ user.avatar" mode="widthFix" class="img"
					@click="ShowUser(user)"></image>
				<text class="container">{{user.nickName+"[" + userTypes[user.type +1] + "]"}}</text>
			</view>
		</view>
		<view v-if="panelStatus[2].visible" class="User">
			<view v-for="(user,index) in users" :key="index" class="head-dd" v-if="user.type==1">

				<text class="iconfont icon-arrowdownfilling ic-xia" @click.stop="clickchoose(user)"></text>
				<image :src="'http://localhost:8082/'+ user.avatar" mode="widthFix" class="img"
					@click="ShowUser(user)"></image>
				<text class="container">{{user.nickName+"[" + userTypes[user.type +1] + "]"}}</text>
			</view>
		</view>
		<view v-if="panelStatus[3].visible" class="User">
			<view v-for="(user,index) in users" :key="index" class="head-dd" v-if="user.type==2">

				<text class="iconfont icon-arrowdownfilling ic-xia" @click.stop="clickchoose(user)"></text>
				<image :src="'http://localhost:8082/'+ user.avatar" mode="widthFix" class="img"
					@click="ShowUser(user)"></image>
				<text class="container">{{user.nickName+"[" + userTypes[user.type +1] + "]"}}</text>
			</view>
		</view>
		<view v-if="panelStatus[4].visible" class="User">
			<view v-for="(user,index) in users" :key="index" class="head-dd" v-if="user.type==-1">

				<text class="iconfont icon-arrowdownfilling ic-xia" @click.stop="clickchoose(user)"></text>
				<image :src="'http://localhost:8082/'+ user.avatar" mode="widthFix" class="img"
					@click="ShowUser(user)"></image>
				<text class="container">{{user.nickName+"[" + userTypes[user.type +1] + "]"}}</text>
			</view>
		</view>
		<!-- 自定义组件 -->
				<dialog-shell ref="shell" title="个人信息" @comfirm="Key">
					<text style='padding-left: 100%;'></text>{{nickName}}</text>
					<text style='padding-left: 100%;'></text>{{userName}}</text>
					<text style='padding-left: 100%;'></text>{{userTpye}}</text>
				</dialog-shell>
				<login-dialog ref="login"></login-dialog>
	</view>
</template>
<script>
	const app = getApp()
	let page = 0
	export default {
		data() {
			return {
				users: [],
				token: app.globalData.token,
				count:-1,
				nickName: "",
				userName: "",
				userTpye: "",
				goSearch:false,
				userTypes: ["禁止登录", "管理员", "教师", "学生", ],
				panelStatus: [{
						visible: true
					}, {
						visible: false
					},
					{
						visible: false
					},
					{
						visible: false
					},
					{
						visible: false
					},
				],
			}
		},
		onLoad() {
			this.getUser()
		},
		onPullDownRefresh(){
					this.users=[],
					this.getUser()
					console.log("执行了下拉刷新")
					uni.stopPullDownRefresh()
				},
		methods: {
		
			clickGood(index) {
				let adc = this.panelStatus[index].visible
				this.panelStatus[index].visible = !adc

			},
			
			getUser() {
				//获取所有用户
				let url = this.$params.host +  this.$params.api_v1 +  this.$params.admin
				let data = {
					token: app.globalData.token
				}
				this.$request.get(url, data, res => {
					this.users = res.data.data

					console.log(res);
				})
			},
			Search() {
							//清空搜索框
							this.goSearch = false
							this.users = []
							page = 0
							this.getUser()
						},
			//搜索
			search(e) {
						let kw = e.value
						if (kw.trim().length == 0) {
							return
						}
						this.searching = true
						this.users = []
						this.count = -1
						let url = this.$params.host +  this.$params.api_v1 + this.$params.admin +  this.$params.search + kw
						let data = {
							token: app.globalData.token
						}
						this.$request.get(url, data, res => {
							this.users = res.data.data
						})
					},
	        ShowUser(users) {
						this.nickName = "昵称：" + users.nickName
						this.userName = "用户名：" + users.userName
						this.userTpye = "身份： " + users.type
						this.$refs.shell.showDialog()
					},
					// 确定按钮
			Key() {
						uni.showToast({
							title: "自定义组件事件"
						});
					},
					clickchoose(user) {
									uni.showActionSheet({
										itemList: ["禁止登录", "审批通过", "驳回申请"],
										success: res => {
										if(res.tapIndex == 0){
							            this.userBan(user.id);
											}else if(res.tapIndex == 1){
												this.userApprove(user.id)
											}else{
												this.userDecline(user.id)
										}
									},
											fail: () => {},
											complete: () => {}
									});
								},
				     userBan(id){
				
								let data = {
									token: app.globalData.token,
									"id":id
								}
								let url = this.$params.host+this.$params.api_v1 +this.$params.admin+ this.$params.ban
								this.$request.postParams(url,data,res => {
									console.log(url)
									this.users.forEach(b => {
										if (b.id == id) {
											b.type = res.data.type
										}
									})
								})
							},
							userApprove(id){
								let data = {
									token: app.globalData.token,
									"id":id
								}
								let url = this.$params.host+this.$params.api_v1 +this.$params.admin+ this.$params.approve
								this.$request.postParams(url,data,res=>{
									this.users.forEach(b => {
										if (b.id == id) {
											b.apply = res.data.applyTeacher
											b.type = res.data.type
										}
									})
								})
							},
							userDecline(id){
								let data = {
									token: app.globalData.token,
									"id":id
								}
								let url = this.$params.host+this.$params.api_v1 +this.$params.admin+ this.$params.decline
								this.$request.postParams(url,data,res=>{
									this.users.forEach(b => {
										if (b.id == id) {
											b.apply = res.data.applyTeacher
										}
									})
								})
							},
						}
					}
</script>

<style>
	@import url("User.css");
</style>